
//下载vueX
//npm i vuex@3 

//1.引入Vue
import Vue from "vue";

//2.引入Vuex
import Vuex from 'vuex';

import axios from "axios";

//使用vuex插件 扩展全局方法 属性
Vue.use(Vuex)

//创建一个state对象
const state = {
  count: 0,
  price: 11,
  movieList: []
};
//创建一个mutations对象
const mutations = {
  //必须是同步函数
  increament(state) {
    state.count++
  },
  // increamentN(state,n){
  //   state.count+=n
  // }
  increamentN(state, { n }) {
    state.count += n
  },
  setMovieList(state, movieList) {
    state.movieList = movieList;
  },
}
//创建一个action对象
const actions = {
  //因为actions中一定会调用commit去调用mutation,所以action中的函数,接受一个对象,对象中提供一个commit方法
  incrementWait({ commit }) {
    setTimeout(() => {
      //我们不要在action中操作数据
      //当异步完成以后,把数据交给mutation去操作数据
      commit("increament");
    }, 2000);
  },
  incrementNWait({ commit }, payload) {
    // console.log(payload, "payload");
    setTimeout(() => {
      //我们不要在action中操作数据
      //当异步完成以后,把数据交给mutation去操作数据
      commit("increamentN", payload);
    }, 2000);
  },
  async getMovieList({ commit }) {
    const result = await axios.get(
      "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
    );
    commit("setMovieList", result.data.data.list);
  },
}
//创建一个getters对象
const getters = {
  //返回一个电影名字小于7大于3过滤的电影列表
  //因为数据是state派生出来的，所以getters中的函数接收一个参数是state
  myMovieList(state) {
    return state.movieList.filter((movie) => {
      return movie.albumName.length >4 && movie.albumName.length <7;
    });
  },
  yourMovieList(state){
    return (start,end)=>{
      console.log(start,end);
      return state.movieList.filter((movie) => {
        return movie.albumName.length >=start && movie.albumName.length <end;
      });
    }
  }


}



//4.创建一个store(vuex的实例),参数是一个配置对象,在配置对象中可以配置actions,mutations,state,getters等等
//暴露出去供Vue实例的配置项挂载
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});